<template>
  <div class="markdown-content" v-html="renderedContent"></div>
</template>

<script>
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

export default {
  name: 'MarkdownRenderer',
  props: {
    content: {
      type: String,
      required: true
    }
  },
  computed: {
    renderedContent() {
      const md = new MarkdownIt({
        html: true,
        highlight: function (str, lang) {
          if (lang && hljs.getLanguage(lang)) {
            try {
              return hljs.highlight(lang, str).value;
            } catch (__) {}
          }
          return '';
        }
      });
      return md.render(this.content);
    }
  }
};
</script>

<style lang="scss">
.markdown-content {
  line-height: 1.6;
}

.markdown-content h1 {
  font-size: 28px;
  margin-bottom: 20px;
}

.markdown-content h2 {
  font-size: 24px;
  margin: 20px 0;
}

.markdown-content h3 {
  font-size: 20px;
  margin: 16px 0;
}

.markdown-content p {
  margin: 16px 0;
}

.markdown-content code {
  background-color: #f5f7fa;
  padding: 2px 6px;
  border-radius: 4px;
}

.markdown-content pre {
  background-color: #f5f7fa;
  padding: 16px;
  border-radius: 4px;
  overflow: auto;
}
</style>